<template>
  <div>
    <div class="" v-if="type === 'mp4'">
      <VideoComp
        v-bind="{
          ...$attrs,
          ...props,
          list: videoList,
        }"
      />
    </div>
    <div v-else>
      <ImgAndMpr
        v-bind="{
          ...$attrs,
          ...props,
          list: imgMprList,
        }"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="LesionItem">
import { inject, computed } from "vue";
import * as Store from "@/store";
import ImgAndMpr from "./ImgAndMpr.vue";
import VideoComp from "./VideoComp.vue";
import type { LesionItem } from "@/store/modules/filmRead/type";
import type * as FileReadApiType from "@/api/filmRead/filmRead.d";

interface Props {
  list:
    | {
        [x: string]: LesionItem | LesionItem[];
        [x: number]: LesionItem | LesionItem[];
      }
    | undefined
    | FileReadApiType.GroupViewItem[];
  isEye: boolean;
  isColor: boolean;
  isDel: boolean;
  LeftHooks: Left.LeftHooks;
  type: string;
  activeKey?: number;
}
const props = defineProps<Props>();
const FilmRead = Store.useFilmRead();
const isCreate = inject<boolean>("isCreate");
const isQuery = inject<boolean>("isQuery");
const isEdit = inject<boolean>("isEdit");
const videoList = computed(() => {
  if (props.type === "mp4") {
    return FilmRead.dictionaryData.frameList;
  }
});
const imgMprList = computed(() => {
  if (props.type !== "mp4") {
    return FilmRead.dictionaryData.lesionDataList;
  }
});
</script>
<style lang="less" scoped>
.left-silder {
  min-width: 180px;
  max-width: 180px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
  display: flex;
  flex-direction: column;
  &-submenu {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    color: #ccc;
    &-title {
      font-weight: 400;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      span {
        margin-left: 6px;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }
  &-submenu.active,
  &-submenu-item-li.active {
    color: #13fffb;
    background-color: #28353c;
  }
  &-submenu:hover {
    cursor: pointer;
  }
  &-submenu-item {
    margin: 0;
    padding: 0;
    user-select: none;
    // flex: 9;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    &-li {
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      border-bottom: 1px solid #000;
    }
    &-li:hover {
      background-color: #28353c;
      //color: #fff;
      cursor: pointer;
    }
    &-title {
      user-select: none;
      width: 100%;
      font-weight: 400;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &-icon {
        padding: 10px 0;
        margin-right: 3px;
      }
      &-content {
        padding: 10px 0;
        margin-left: 6px;
        display: inline-block;
        // width: 100%;
        min-width: 86px;
        max-width: 86px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &-icon {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 8px;
      &-color {
        width: 10px;
        height: 10px;
        margin-right: 10px;
        margin-top: 2px;
        :deep(.el-color-picker--small) {
          height: 10px;
          .el-color-picker__trigger {
            width: 10px;
            height: 10px;
            margin-right: 10px;
            display: block;
            border: 0;
            opacity: 0;
          }
        }
      }

      &-color:hover,
      &-del:hover {
        cursor: pointer;
      }
      &-del:hover {
        color: #67c9d5;
      }
      &-del {
        .iconfont {
          font-size: 12px;
        }
      }
      &-eye {
        margin-left: 9px;
        .iconfont {
          font-size: 12px;
        }
      }
    }
  }
  // &-submenu-item::-webkit-scrollbar-track {
  //   background-color: #f5f5f5;
  //   --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  // }
  // &-submenu-item::-webkit-scrollbar {
  //   width: 6px;
  //   background-color: rgba(40, 49, 66, 0.6);
  // }
  // &-submenu-item::-webkit-scrollbar-thumb {
  //   background-color: #8b8b8b;
  //   border-radius: 10px;
  // }
  &-bottom-tip {
    // flex: 1;
    padding: 12px;
    border-top: 1px solid #000;
    height: 132px;
    min-height: 132px;
    max-height: 132px;
    &-title {
      display: flex;
      align-items: center;
      &-circle {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #f7bc5a;
        border-radius: 50%;
      }
      &-content {
        font-weight: 400;
        font-size: 12px;
        color: #f7bc5a;
        margin-left: 4px;
      }
    }
    &-content {
      margin-top: 4px;
      font-weight: 400;
      font-size: 12px;
      line-height: 22px;
      color: #ccc;
    }
  }
}
</style>
